import React, { Component } from "react";
import {
  Input,
  Select,
  Icon,
  Card,
  Button,
  Menu,
  Dropdown,
  Table,
  Tabs,
} from "antd";
import LinkButton from "../../../components/link-button";
const { TabPane } = Tabs;
const { TextArea } = Input;
function callback(key) {
  console.log(key);
}
function onChange(value) {
  console.log(`selected ${value}`);
}

function onBlur() {
  console.log("blur");
}

function onFocus() {
  console.log("focus");
}

function onSearch(val) {
  console.log("search:", val);
}
const menu = (
  <Menu>
    <Menu.Item>
      <a
        target="_blank"
        rel="noopener noreferrer"
        href="http://www.alipay.com/"
      >
        1st menu item
      </a>
    </Menu.Item>
    <Menu.Item>
      <a
        target="_blank"
        rel="noopener noreferrer"
        href="http://www.taobao.com/"
      >
        2nd menu item
      </a>
    </Menu.Item>
    <Menu.Item>
      <a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
        3rd menu item
      </a>
    </Menu.Item>
  </Menu>
);

const { Option } = Select;
const columns = [
  {
    title: "告警时间",
    dataIndex: "time",
  },
  {
    title: "威胁名称",
    dataIndex: "name",
  },
  {
    title: "应用协议",
    dataIndex: "protocol",
  },
  {
    title: "威胁等级",
    key: "grade",
    dataIndex: "grade",
  },
  {
    title: "威胁类型",
    dataIndex: "type",
  },
  {
    title: "来源IP",
    dataIndex: "source",
  },
  {
    title: "目的IP",
    dataIndex: "goal",
  },
  {
    title: "告警结果",
    dataIndex: "result",
  },
  {
    title: "告警次数",
    dataIndex: "degree",
  },
];

const data = [
  {
    key: "1",
    time: "2021-07-13 10:56",
    name: "永恒之蓝蓝洞利用",
    protocol: "smb",
    grade: "高威胁",
    type: "漏洞利用/smb扫描",
    source: "192.168.27.198",
    goal: "10.20.28.119",
    result: "尝试",
    degree: "1",
    description: () => (
      <div>
        <Tabs defaultActiveKey="1" onChange={callback}>
          <TabPane tab="告警详情" key="1">
            <div style={{ width: "100%" }}>
              <div style={{ display: "flex", justifyContent: "space-between" }}>
                <div style={{ color: "#00bfff" }}>
                  <LinkButton>文件注入攻击尝试（URI中包含hatcess）</LinkButton>
                  <Icon type="api" />
                </div>
                <div>
                  <Button type="primary">添加白名单</Button>&nbsp;&nbsp;
                  <Button type="primary">
                    <Icon type="download" />
                    PCAP包
                  </Button>
                  &nbsp;&nbsp;
                  <Button type="primary">
                    <Icon type="eye" />
                    查看PC
                  </Button>
                </div>
              </div>
              <div style={{ marginTop: "20px" }}>
                <span style={{ fontWeight: "bold" }}>请求头</span>
                <Icon type="file" />
              </div>
              <TextArea
                style={{ width: 1000 }}
                rows={10}
                value="Request URL: https://tbm-auth.alicdn.com/e99361edd833010b/FaO2S5wmh0VcHiBuXx8/uyeGbk58WpghKmdqoYi_235033157556___hd.m3u8?auth_key=1640067058-0-0-a0f19fe2753a9d3c73c922ea7af45d7f
                        Request Method: GET
                        Status Code: 200 
                        Remote Address: 222.188.8.252:443
                        Referrer Policy: unsafe-url
                        access-control-allow-origin: *
                        content-length: 480
                        content-type: application/vnd.apple.mpegurl
                        date: Tue, 21 Dec 2021 05:25:59 GMT
                        eagleid: debc08d116400643599264339e
                        last-modified: Sun, 01 Sep 2019 07:17:29 GMT
                        server: Tengine
                        timing-allow-origin: *
                        via: cache6.l2cm9[52,52,200-0,M], cache31.l2cm9[53,0], cache42.l2cn2635[0,0,200-0,H], cache30.l2cn2635[1,0], cache12.cn2024[0,0,200-0,H], cache9.cn2024[,0]
                        x-cache: HIT TCP_MEM_HIT dirn:0:277792814
                        x-swift-cachetime: 16437471
                        x-swift-savetime: Mon, 20 Dec 2021 05:07:04 GMT"
              />
            </div>
          </TabPane>
          <TabPane tab="基本信息" key="2">
            基本信息
          </TabPane>
          <TabPane tab="原始告警列表" key="3">
            原始告警列表
          </TabPane>
        </Tabs>
      </div>
    ),
  },
  {
    key: "2",
    time: "2021-07-13 10:52",
    name: "检测到漏洞扫描工具",
    protocol: "http",
    grade: "中威胁",
    type: "探测扫描/扫描器指纹",
    source: "10.20.152.177",
    goal: "10.20.52.23",
    result: "失败",
    degree: "1",
    description: () => (
      <div>
        <Tabs defaultActiveKey="1" onChange={callback}>
          <TabPane tab="告警详情" key="1">
            <div style={{ width: "100%" }}>
              <div style={{ display: "flex", justifyContent: "space-between" }}>
                <div style={{ color: "#00bfff" }}>
                  <LinkButton>文件注入攻击尝试（URI中包含hatcess）</LinkButton>
                  <Icon type="api" />
                </div>
                <div>
                  <Button type="primary">添加白名单</Button>&nbsp;&nbsp;
                  <Button type="primary">
                    <Icon type="download" />
                    PCAP包
                  </Button>
                  &nbsp;&nbsp;
                  <Button type="primary">
                    <Icon type="eye" />
                    查看PC
                  </Button>
                </div>
              </div>
              <div style={{ marginTop: "20px" }}>
                <span style={{ fontWeight: "bold" }}>请求头</span>
                <Icon type="file" />
              </div>
              <TextArea
                style={{ width: 1000 }}
                rows={10}
                value="Request URL: https://tbm-auth.alicdn.com/e99361edd833010b/FaO2S5wmh0VcHiBuXx8/uyeGbk58WpghKmdqoYi_235033157556___hd.m3u8?auth_key=1640067058-0-0-a0f19fe2753a9d3c73c922ea7af45d7f
                        Request Method: GET
                        Status Code: 200 
                        Remote Address: 222.188.8.252:443
                        Referrer Policy: unsafe-url
                        access-control-allow-origin: *
                        content-length: 480
                        content-type: application/vnd.apple.mpegurl
                        date: Tue, 21 Dec 2021 05:25:59 GMT
                        eagleid: debc08d116400643599264339e
                        last-modified: Sun, 01 Sep 2019 07:17:29 GMT
                        server: Tengine
                        timing-allow-origin: *
                        via: cache6.l2cm9[52,52,200-0,M], cache31.l2cm9[53,0], cache42.l2cn2635[0,0,200-0,H], cache30.l2cn2635[1,0], cache12.cn2024[0,0,200-0,H], cache9.cn2024[,0]
                        x-cache: HIT TCP_MEM_HIT dirn:0:277792814
                        x-swift-cachetime: 16437471
                        x-swift-savetime: Mon, 20 Dec 2021 05:07:04 GMT"
              />
            </div>
          </TabPane>
          <TabPane tab="基本信息" key="2">
            基本信息
          </TabPane>
          <TabPane tab="原始告警列表" key="3">
            原始告警列表
          </TabPane>
        </Tabs>
      </div>
    ),
  },
  {
    key: "3",
    time: "2021-07-13 10:50",
    name: "检测到漏洞扫描工具",
    protocol: "http",
    grade: "中威胁",
    type: "探测扫描/扫描器指纹",
    source: "10.20.152.177",
    goal: "10.20.52.23",
    result: "尝试",
    degree: "1",
    description: () => (
      <div>
        <Tabs defaultActiveKey="1" onChange={callback}>
          <TabPane tab="告警详情" key="1">
            <div style={{ width: "100%" }}>
              <div style={{ display: "flex", justifyContent: "space-between" }}>
                <div style={{ color: "#00bfff" }}>
                  <LinkButton>文件注入攻击尝试（URI中包含hatcess）</LinkButton>
                  <Icon type="api" />
                </div>
                <div>
                  <Button type="primary">添加白名单</Button>&nbsp;&nbsp;
                  <Button type="primary">
                    <Icon type="download" />
                    PCAP包
                  </Button>
                  &nbsp;&nbsp;
                  <Button type="primary">
                    <Icon type="eye" />
                    查看PC
                  </Button>
                </div>
              </div>
              <div style={{ marginTop: "20px" }}>
                <span style={{ fontWeight: "bold" }}>请求头</span>
                <Icon type="file" />
              </div>
              <TextArea
                style={{ width: 1000 }}
                rows={10}
                value="Request URL: https://tbm-auth.alicdn.com/e99361edd833010b/FaO2S5wmh0VcHiBuXx8/uyeGbk58WpghKmdqoYi_235033157556___hd.m3u8?auth_key=1640067058-0-0-a0f19fe2753a9d3c73c922ea7af45d7f
                        Request Method: GET
                        Status Code: 200 
                        Remote Address: 222.188.8.252:443
                        Referrer Policy: unsafe-url
                        access-control-allow-origin: *
                        content-length: 480
                        content-type: application/vnd.apple.mpegurl
                        date: Tue, 21 Dec 2021 05:25:59 GMT
                        eagleid: debc08d116400643599264339e
                        last-modified: Sun, 01 Sep 2019 07:17:29 GMT
                        server: Tengine
                        timing-allow-origin: *
                        via: cache6.l2cm9[52,52,200-0,M], cache31.l2cm9[53,0], cache42.l2cn2635[0,0,200-0,H], cache30.l2cn2635[1,0], cache12.cn2024[0,0,200-0,H], cache9.cn2024[,0]
                        x-cache: HIT TCP_MEM_HIT dirn:0:277792814
                        x-swift-cachetime: 16437471
                        x-swift-savetime: Mon, 20 Dec 2021 05:07:04 GMT"
              />
            </div>
          </TabPane>
          <TabPane tab="基本信息" key="2">
            基本信息
          </TabPane>
          <TabPane tab="原始告警列表" key="3">
            原始告警列表
          </TabPane>
        </Tabs>
      </div>
    ),
  },
  {
    key: "4",
    time: "2021-07-13 10:50",
    name: "检测到漏洞扫描工具",
    protocol: "http",
    grade: "中威胁",
    type: "探测扫描/扫描器指纹",
    source: "10.20.152.177",
    goal: "10.20.52.23",
    result: "尝试",
    degree: "1",
    description: () => (
      <div>
        <Tabs defaultActiveKey="1" onChange={callback}>
          <TabPane tab="告警详情" key="1">
            <div style={{ width: "100%" }}>
              <div style={{ display: "flex", justifyContent: "space-between" }}>
                <div style={{ color: "#00bfff" }}>
                  <LinkButton>文件注入攻击尝试（URI中包含hatcess）</LinkButton>
                  <Icon type="api" />
                </div>
                <div>
                  <Button type="primary">添加白名单</Button>&nbsp;&nbsp;
                  <Button type="primary">
                    <Icon type="download" />
                    PCAP包
                  </Button>
                  &nbsp;&nbsp;
                  <Button type="primary">
                    <Icon type="eye" />
                    查看PC
                  </Button>
                </div>
              </div>
              <div style={{ marginTop: "20px" }}>
                <span style={{ fontWeight: "bold" }}>请求头</span>
                <Icon type="file" />
              </div>
              <TextArea
                style={{ width: 1000 }}
                rows={10}
                value="Request URL: https://tbm-auth.alicdn.com/e99361edd833010b/FaO2S5wmh0VcHiBuXx8/uyeGbk58WpghKmdqoYi_235033157556___hd.m3u8?auth_key=1640067058-0-0-a0f19fe2753a9d3c73c922ea7af45d7f
                        Request Method: GET
                        Status Code: 200 
                        Remote Address: 222.188.8.252:443
                        Referrer Policy: unsafe-url
                        access-control-allow-origin: *
                        content-length: 480
                        content-type: application/vnd.apple.mpegurl
                        date: Tue, 21 Dec 2021 05:25:59 GMT
                        eagleid: debc08d116400643599264339e
                        last-modified: Sun, 01 Sep 2019 07:17:29 GMT
                        server: Tengine
                        timing-allow-origin: *
                        via: cache6.l2cm9[52,52,200-0,M], cache31.l2cm9[53,0], cache42.l2cn2635[0,0,200-0,H], cache30.l2cn2635[1,0], cache12.cn2024[0,0,200-0,H], cache9.cn2024[,0]
                        x-cache: HIT TCP_MEM_HIT dirn:0:277792814
                        x-swift-cachetime: 16437471
                        x-swift-savetime: Mon, 20 Dec 2021 05:07:04 GMT"
              />
            </div>
          </TabPane>
          <TabPane tab="基本信息" key="2">
            基本信息
          </TabPane>
          <TabPane tab="原始告警列表" key="3">
            原始告警列表
          </TabPane>
        </Tabs>
      </div>
    ),
  },
];

class warning extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <Card>
        <div style={{ display: "flex" }}>
          <div
            style={{
              display: "flex",
              flexWrap: "wrap",
              justifyContent: "space-around",
            }}
          >
            <div>
              <Input
                addonBefore="威胁告警"
                placeholder="告警名称/CVE编号"
                style={{ width: 250 }}
              />
            </div>
            <div>
              <button
                style={{
                  width: 79,
                  height: 32,
                  display: "inline-block",
                  background: "#fafafa",
                  border: "1px solid #d9d9d9",
                }}
              >
                威胁等级
              </button>
              <Select
                showSearch
                style={{
                  width: 171,
                  height: 32,

                  borderLeft: "0",
                }}
                placeholder="请选择"
                optionFilterProp="children"
                onChange={onChange}
                onFocus={onFocus}
                onBlur={onBlur}
                onSearch={onSearch}
                filterOption={(input, option) =>
                  option.props.children
                    .toLowerCase()
                    .indexOf(input.toLowerCase()) >= 0
                }
              >
                <Option value="jack">高</Option>
                <Option value="lucy">中</Option>
                <Option value="tom">低</Option>
              </Select>
            </div>
            <div>
              <button
                style={{
                  width: 79,
                  height: 32,
                  display: "inline-block",
                  background: "#fafafa",
                  border: "1px solid #d9d9d9",
                }}
              >
                威胁类型
              </button>
              <Select
                showSearch
                style={{
                  width: 171,
                  height: 32,

                  borderLeft: "0",
                }}
                placeholder="请选择"
                optionFilterProp="children"
                onChange={onChange}
                onFocus={onFocus}
                onBlur={onBlur}
                onSearch={onSearch}
                filterOption={(input, option) =>
                  option.props.children
                    .toLowerCase()
                    .indexOf(input.toLowerCase()) >= 0
                }
              >
                <Option value="jack">高</Option>
                <Option value="lucy">中</Option>
                <Option value="tom">低</Option>
              </Select>
            </div>
            <div>
              <button
                style={{
                  width: 79,
                  height: 32,
                  display: "inline-block",
                  background: "#fafafa",
                  border: "1px solid #d9d9d9",
                }}
              >
                告警时间
              </button>
              <Input
                style={{ width: 171 }}
                value="最近一小时"
                suffix={<Icon type="calendar" />}
              />
            </div>
            <div>
              <Input
                addonBefore="来源 IP　"
                placeholder="请输入来源IP"
                style={{ width: 250 }}
              />
            </div>
            <div>
              <Input
                addonBefore="目的 IP　"
                placeholder="请输入目的IP"
                style={{ width: 250 }}
              />
            </div>
            <div>
              <button
                style={{
                  width: 79,
                  height: 32,
                  display: "inline-block",
                  background: "#fafafa",
                  border: "1px solid #d9d9d9",
                }}
              >
                告警结果
              </button>
              <Select
                showSearch
                style={{
                  width: 171,
                  height: 32,

                  borderLeft: "0",
                }}
                placeholder="请选择"
                optionFilterProp="children"
                onChange={onChange}
                onFocus={onFocus}
                onBlur={onBlur}
                onSearch={onSearch}
                filterOption={(input, option) =>
                  option.props.children
                    .toLowerCase()
                    .indexOf(input.toLowerCase()) >= 0
                }
              >
                <Option value="jack">高</Option>
                <Option value="lucy">中</Option>
                <Option value="tom">低</Option>
              </Select>
            </div>
            <div>
              <button
                style={{
                  width: 79,
                  height: 32,
                  display: "inline-block",
                  background: "#fafafa",
                  border: "1px solid #d9d9d9",
                }}
              >
                应用协议
              </button>
              <Select
                showSearch
                style={{
                  width: 171,
                  height: 32,

                  borderLeft: "0",
                }}
                placeholder="请选择"
                optionFilterProp="children"
                onChange={onChange}
                onFocus={onFocus}
                onBlur={onBlur}
                onSearch={onSearch}
                filterOption={(input, option) =>
                  option.props.children
                    .toLowerCase()
                    .indexOf(input.toLowerCase()) >= 0
                }
              >
                <Option value="jack">高</Option>
                <Option value="lucy">中</Option>
                <Option value="tom">低</Option>
              </Select>
            </div>
          </div>
          <div style={{ width: 300 }}>
            <div>
              <Button>查询</Button>
              &nbsp;&nbsp;
              <Button>重置</Button>
            </div>
            <div style={{ marginTop: 20, marginLeft: 5 }}>
              <Dropdown overlay={menu}>
                <LinkButton
                  className="ant-dropdown-link"
                  onClick={(e) => e.preventDefault()}
                  style={{ color: "#00BFFF" }}
                >
                  高级搜索
                  <Icon type="down" />
                </LinkButton>
              </Dropdown>
              <Icon style={{ marginLeft: 30 }} type="reload" />
            </div>
          </div>
        </div>
        <Card>
          <Table
            columns={columns}
            dataSource={data}
            expandedRowRender={(record) => (
              <div style={{ margin: 0 }}>{record.description()}</div>
            )}
          />
          <Button type="primary">导出查询结果</Button>
        </Card>
      </Card>
    );
  }
}

export default warning;
